<template>
{{$store.state.num}}
  <my-header></my-header>
  <my-task :isfinish="false">
  <span>正在进行</span><span class="count">{{countWorking}}</span>
  </my-task>
  <my-task :isfinish="true">
    <span>已经完成</span><span class="count">{{countFinish}}</span>
  </my-task>
</template>

<script>
var arr = [1, 2, 3]
console.log(...arr);
import myHeader from '@/components/myHeader'
import myTask from '@/components/myTask'
// 引入vuex提供的辅助函数
import { mapGetters } from 'vuex'
export default {
  name: 'Home',
  components: {
    myHeader,
    myTask
  },
  computed: {
    // mapGetters可以将getters中的方法 放入computed计算属性中 便于在页面中直接使用getters数据
    ...mapGetters([
      'countWorking',
      'countFinish'
    ])
  },
  created() {
  }
}
</script>
<style lang="scss" scoped>
  .count {
    width: 24px;
    height: 24px;
    background-color: #E6E6FA;
    text-align: center;
    line-height: 24px;
    border-radius: 24px;
    font-size: 18px;
  }
</style>
